import React, { Component } from 'react'
import store from "@/store"
import {
  autorun,
  // reaction
} from 'mobx'
import { Divider } from 'antd'

class One extends Component {
  constructor(props) {
    super(props);
    this.state = {
      n: store.n  //store的初值
    }

  }
  componentDidMount() {
    // 监听store里的数据的变化
    // 需要手动取消监听; 监听的返回值就是取消监听的方法,注销时调用即可
    /* BUG: 1.下一次渲染这个组件,会有两个监听; 2.或者组件销毁了,监听的异步数据回来了,还在使用setState */
    this.cancel = autorun(() => {
      this.setState({
        n: store.n
      })
    })
  }
  componentWillUnmount() {
    this.cancel()
  }
  render() {
    return (
      <div>
        <Divider orientation="left">手动监听,引入store,并从中取值和使用方法</Divider>
        {this.state.n}
        <button onClick={store.changeData}>+</button>
      </div>
    )
  }
}
export default One